<!-- 图文2 -->
<template>
  <div class="img-text-two">
    <!-- 标题部分 -->
    <div class="header">
      <div class="title">
        {{ contentArr[0]?.name || '' }}
      </div>
      <div class="breadcrumb">
        <img src="@/assets/img/location.png" alt="Location Icon" class="location-icon" />
        <span class="current-location">当前位置</span>
        <span class="parent-name">{{ contentArr[0]?.parentName || '' }}</span>
        <span class="separator">></span>
        <span class="current-name">{{ contentArr[0]?.name || '' }}</span>
      </div>
    </div>

    <!-- 内容部分 -->
    <div class="content-container">
      <div class="grid-container">
        <div v-for="item in contentArr" :key="item.id" class="grid-item">
          <img :src="item.imageUrl" alt="Member Image" class="member-image" />
          <div class="member-name">
            {{ item.linkTitle }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { defineProps } from 'vue'

interface ContentItem {
	id: string
	name: string
	parentName: string
	imageUrl: string
	linkTitle: string
}

const props = defineProps<{
	contentArr: ContentItem[]
}>()
</script>
  
  <style scoped lang="scss">
.img-text-two {
	width: 100vw;
	min-height: 100vh;
	background-color: #fff;
	position: relative;
	padding-bottom: 5vh;
	margin: 5vh 0;
	z-index: 0;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
}

.header {
	margin-left: 15vw;
	padding-top: 5vh;
}

.title {
	font-size: 6vh;
	font-weight: 600;
	color: #4e4e4e;
}

.breadcrumb {
	display: flex;
	align-items: center;
	margin: 2vh 0 0;
	color: #4e4e4e;
}

.location-icon {
	width: 1vw;
	height: 1vw;
}

.current-location {
	margin: 0 1vh;
}

.parent-name,
.current-name {
	color: #3959ec;
}

.separator {
	margin: 0 0.5vh;
}

.content-container {
	display: flex;
	justify-content: center;
}

.grid-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 70vw;
}

.grid-item {
    // width:23vw;
	width: 21vw;//俩系统样式不一样，先改成这样
	height: 35vh;
	margin: 5vh 0;
	padding: 1vw;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	transition: border-color 0.5s ease;
	border: 1px solid #fff;

	// &:hover {
	// 	border-color: #308af0;
	// }
}

.member-image {
	object-fit: contain;
	height: 17vh;
	width: auto;
}

.member-name {
	width: 100%;
	font-size: 3vh;
	font-weight: 550;
	color: #505050;
	margin: 1vh 0;
	text-align: center;
}
</style>